<?php include load_template('_subnav.php')?>

<!-- cropper specific styles and javascript. -->
<style type="text/css" media="screen">
    #instructions {
        margin: 5px 5px 0 0;
    }
    #instructions ul {
        margin: 0 ;
        padding: 0;
        list-style-type: none;
        font-size: xx-small;
    }
    #instructions ul li {
        margin: 1em 0;
    }
    .imgCrop_wrap {
    	/* width: 500px;   @done_in_js */
    	/* height: 375px;  @done_in_js */
    	position: relative;
    	cursor: crosshair;
    }

    /* an extra classname is applied for Opera < 9.0 to fix it's lack of opacity support */
    .imgCrop_wrap.opera8 .imgCrop_overlay,
    .imgCrop_wrap.opera8 .imgCrop_clickArea { 
    	background-color: transparent;
    }

    /* fix for IE displaying all boxes at line-height by default, although they are still 1 pixel high until we combine them with the pointless span */
    .imgCrop_wrap,
    .imgCrop_wrap * {
    	font-size: 0;
    }

    .imgCrop_overlay {
    	background-color: #000;
    	opacity: 0.5;
    	filter:alpha(opacity=50);
    	position: absolute;
    	width: 100%;
    	height: 100%;
    }

    .imgCrop_selArea {
    	position: absolute;
    	/* @done_in_js 
    	top: 20px;
    	left: 20px;
    	width: 200px;
    	height: 200px;
    	background: transparent url(castle.jpg) no-repeat  -210px -110px;
    	*/
    	cursor: move;
    	z-index: 2;
    }

    /* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
    .imgCrop_clickArea {
    	width: 100%;
    	height: 100%;
    	background-color: #FFF;
    	opacity: 0.01;
    	filter:alpha(opacity=01);
    }

    .imgCrop_marqueeHoriz {
    	position: absolute;
    	width: 100%;
    	height: 1px;
    	background: transparent url(<?php echo get_installed_path().'/js/cropper/'; ?>marqueeHoriz.gif) repeat-x 0 0;
    	z-index: 3;
    }

    .imgCrop_marqueeVert {
    	position: absolute;
    	height: 100%;
    	width: 1px;
    	background: transparent url(<?php echo get_installed_path().'/js/cropper/'; ?>marqueeVert.gif) repeat-y 0 0;
    	z-index: 3;
    }

    .imgCrop_marqueeNorth { top: 0; left: 0; }
    .imgCrop_marqueeEast  { top: 0; right: 0; }
    .imgCrop_marqueeSouth { bottom: 0px; left: 0; }
    .imgCrop_marqueeWest  { top: 0; left: 0; }


    .imgCrop_handle {
    	position: absolute;
    	border: 1px solid #333;
    	width: 6px;
    	height: 6px;
    	background: #FFF;
    	opacity: 0.5;
    	filter:alpha(opacity=50);
    	z-index: 4;
    }

    /* fix IE 5 box model */
    * html .imgCrop_handle {
    	width: 8px;
    	height: 8px;
    	wid\th: 6px;
    	hei\ght: 6px;
    }

    .imgCrop_handleN {
    	top: -3px;
    	left: 0;
    	/* margin-left: 49%;    @done_in_js */
    	cursor: n-resize;
    }

    .imgCrop_handleNE { 
    	top: -3px;
    	right: -3px;
    	cursor: ne-resize;
    }

    .imgCrop_handleE {
    	top: 0;
    	right: -3px;
    	/* margin-top: 49%;    @done_in_js */
    	cursor: e-resize;
    }

    .imgCrop_handleSE {
    	right: -3px;
    	bottom: -3px;
    	cursor: se-resize;
    }

    .imgCrop_handleS {
    	right: 0;
    	bottom: -3px;
    	/* margin-right: 49%; @done_in_js */
    	cursor: s-resize;
    }

    .imgCrop_handleSW {
    	left: -3px;
    	bottom: -3px;
    	cursor: sw-resize;
    }

    .imgCrop_handleW {
    	top: 0;
    	left: -3px;
    	/* margin-top: 49%;  @done_in_js */
    	cursor: e-resize;
    }

    .imgCrop_handleNW {
    	top: -3px;
    	left: -3px;
    	cursor: nw-resize;
    }

    /**
     * Create an area to click & drag around on as the default browser behaviour is to let you drag the image 
     */
    .imgCrop_dragArea {
    	width: 100%;
    	height: 100%;
    	z-index: 200;
    	position: absolute;
    	top: 0;
    	left: 0;
    }

    .imgCrop_previewWrap {
    	/* width: 200px;  @done_in_js */
    	/* height: 200px; @done_in_js */
    	overflow: hidden;
    	position: relative;
    }

    .imgCrop_previewWrap img {
    	position: absolute;
    }
    
    input.zero_border {
        border: 0;
    }
</style>

<?php echo javascript_include_tag(get_installed_path().'/js/cropper/cropper.js')  ?>
<h1>Modifying Image</h1>

<?php
    // get file dimensions and path
    if(!list($width, $height, $type, $attr) = getimagesize($server_path_to_file.'/'.$image['name'])){
        echo '<div class="div_form_error">Could not get image dimensions!</div>';   
    }

?>

<script type='text/javascript'>
<!--
    var orginal_width = <?php echo $width;?>; 
    var orginal_height= <?php echo $height;?>;
    function toggleConstraints() 
    {
        var lock = $("scaleConstImg");
        var checkbox = $("constProp");
    
        if(lock != null && lock.src != null) {
            if(lock.src.indexOf("unlocked2.gif") >= 0){
                lock.src = "<?php echo get_installed_path() ?>/images/admin/islocked2.gif";
                checkbox.checked = true;
                checkConstrains('width');
            }else{
                lock.src = "<?php echo get_installed_path() ?>/images/admin/unlocked2.gif";
                checkbox.checked = false;
            }
        }
    }
    function checkConstrains(changed) 
    {
        var constrained = $('constProp');
        if(constrained.checked){        
            var width = $('r_width').value ;        
            var height = $('r_height').value ;
        
            if(orginal_width > 0 && orginal_height > 0){
                if(changed == 'width' && width > 0) 
                    $('r_height').value = parseInt((width/orginal_width)*orginal_height);
                else if(changed == 'height' && height > 0) 
                    $('r_width').value = parseInt((height/orginal_height)*orginal_width);
            }
        }    
    }

    /// setup the callback function
	function onEndCrop( coords, dimensions ) {
		$( 'x1' ).value = coords.x1;
		$( 'y1' ).value = coords.y1;
		$( 'x2' ).value = coords.x2;
		$( 'y2' ).value = coords.y2;
		$( 'c_width' ).value = dimensions.width;
		$( 'c_height' ).value = dimensions.height;
	}
	
	// basic example
	Event.observe( 
		window, 
		'load', 
		function() { 
			new Cropper.Img( 
				'imageToProcess',
				{
					onEndCrop: onEndCrop 
				}
			) 
		}
	); 		
    
</script>


<table cellpadding="0" cellspacing="0" width='100%'>
    <tr>        
<td width='20%'>
    

<div class='section' style='margin: 0 5px 0 0'>
        <h3><b>Resize Image</b></h3>
        <?php echo form_tag('crop_image') ?>
        <?php echo hidden_field_tag('modify_image',1) ?>
        <?php echo hidden_field_tag('file_folder_id',$file_folder_id) ?>
        <?php echo hidden_field_tag('id',$image['id']) ?>
        <?php echo hidden_field_tag('action','resize') ?>
        <p>Current Dimensions:<br /> 
            width: <?php echo $width ?> X height: <?php echo $height ?></p>
        <p>New Width: <input type="text" name="r_width" id="r_width" autocomplete='off' value="<?php echo $width ?>" size='4'onkeyup="checkConstrains('width')" />                 
        <br />
        
        New Height <input type="text" name="r_height" id='r_height' value="<?php echo $height ?>"  autocomplete='off' size='4' onkeyup="checkConstrains('height')"/>
        <br />
        <input type="checkbox" id="constProp" value="1" checked="checked" onclick="toggleConstraints()"/> Constrain Proportions ?</p>
        <p><input type='checkbox' name='save_as_new' value='1' id='save_as' /> 
           Save as a new file?</p>
         </p>
         <?php echo submit_tag('Resize Image') ?> or 
         <?php echo link_to('Cancel', 
                        array('controller'=>'admin/files', 
                              'action'=>'index?file_folder_id='.$file_folder_id)) 
        ?>
        <?php echo end_form_tag() ?>
        </div>
        
        <div class='section' style='margin: 5px 5px 0 0'>
        <h3><b>Crop Image</b></h3>
        <?php echo form_tag('crop_image') ?>
        <?php echo hidden_field_tag('modify_image',1) ?>
        <?php echo hidden_field_tag('file_folder_id',$file_folder_id) ?>
        <?php echo hidden_field_tag('id',$image['id']) ?>
        <?php echo hidden_field_tag('action','crop') ?>
        <table border="0" cellspacing="1" cellpadding="2">
           <tr>
               <td>x1:
        		<input type="text" name="x1" id="x1" size="4" class='zero_border' /></td>
               <td>y1:
        		<input type="text" name="y1" id="y1" size="4"  class='zero_border' /></td>
           </tr>
           <tr>
               <td>x2:
        		<input type="text" name="x2" id="x2" size="4" class='zero_border' /></td>
               <td>y2:
        		<input type="text" name="y2" id="y2" size="4" class='zero_border' /></td>
           </tr>
           <tr>
               <td>width:
        		<input type="text" name="c_width" id="c_width" size="4" class='zero_border' /></td>
               <td>height:
        		<input type="text" name="c_height" id="c_height" size="4" class='zero_border' /></td>
           </tr>
           </table>
           
               <p><input type='checkbox' name='save_as_new' value='1' id='save_as' /> 
                  Save as a new file?</p>
                  <?php echo submit_tag('Crop Image') ?> or 
                  <?php echo link_to('Cancel', 
                                  array('controller'=>'admin/files', 
                                        'action'=>'index?file_folder_id='.$file_folder_id)) 
                  ?>
           
        <?php echo end_form_tag() ?>
    </div>
        
        <div id="instructions">
            <div class='section'>
        	<h2><b>Cropping Instructions</b></h2>		
        	<ul>
        	    <li>Place your mouse over the image, the cursor will change to a cross. Use the cross to drag and create a box. You can use the handles on the sides of the selection to resize it</li>
        		<li>Hold shift while dragging/resizing to limit select area to a square (<em>not applicable when ratios are applied</em>).</li>
        		<li>Use cursor keys to nudge the select area by one pixel, holding shift will nudge area by 10 pixels.</li>			
        	</ul>
        	</div>
        </div>
    </td>
    <td class='section'>
         <h2>Modifying <span style='color:red'><?php echo h($image['name']); ?></span></h2>
        <div id="testWrap" style="height:500px;width:500px;overflow:auto;text-align:left;">
            <img 
                src="<?php echo $public_path_to_file.'/'.$image['name'] ?>"  
                id="imageToProcess"
                width="<?php echo $width ?>" 
                height="<?php echo $height ?>"
             />	
        </div>
    
</td>          
            
</tr></table>

